<template>
  <el-dialog title="会员回访信息详情" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" ref="dataForm" label-width="110px" inline>
      <el-row>
        <el-col :span="6">
          <el-form-item label="配镜单号" prop="saleBillId">
            <el-input v-model="dataForm.saleBillId" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属门店" prop="deptName">
            <el-input v-model="dataForm.deptName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="特殊加工要求" prop="workRequest">
            <el-input v-model="dataForm.workRequest" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="会员姓名" prop="name">
            <el-input v-model="dataForm.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="phone1">
            <el-input v-model="dataForm.phone1" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配镜时间" prop="saleCreateTime">
            <el-input v-model="dataForm.saleCreateTime" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="取镜时间" prop="actulTakeMirroTime">
            <el-input v-model="dataForm.actulTakeMirroTime" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="原价金额" prop="originalPrice">
            <el-input v-model="dataForm.originalPrice" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="折扣金额" prop="discountPrice">
            <el-input v-model="dataForm.discountPrice" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="应收金额" prop="receivablePrice">
            <el-input v-model="dataForm.receivablePrice" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="实缴金额" prop="paidPrice">
            <el-input v-model="dataForm.paidPrice" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider content-position="center">视光详情</el-divider>
      <table class="miui-table">
        <tr>
          <th>镜片种类</th>
          <th>右眼(OD)/左眼(OS)</th>
          <th>球镜</th>
          <th>柱镜</th>
          <th>轴向</th>
          <th>add</th>
          <th>三棱镜</th>
          <th>基底</th>
          <th>棱镜</th>
          <th>远用瞳距(mm)</th>
          <th>近用瞳距(mm)</th>
          <th>远用VA</th>
          <th>近用VA</th>
        </tr>
        <tr>
          <td>{{valueOrNameTypeChange(dataForm.saleType)}}</td>
          <td>R</td>
          <td>{{optometryDetail.ballGlassOd}}</td>
          <td>{{optometryDetail.postGlassOd}}</td>
          <td>{{optometryDetail.axesOd}}</td>
          <td>{{optometryDetail.addOd}}</td>
          <td>{{optometryDetail.arriseGlassOd}}</td>
          <td>{{optometryDetail.basisOd}}</td>
          <td></td>
          <td>{{optometryDetail.farPupilDistanceOd}}</td>
          <td>{{optometryDetail.nearPupilDistanceOd}}</td>
          <td>{{optometryDetail.farUseOd}}</td>
          <td>{{optometryDetail.nearUseOd}}</td>
        </tr>
        <tr>
          <td>{{valueOrNameTypeChange(dataForm.saleType)}}</td>
          <td>L</td>
          <td>{{optometryDetail.ballGlassOs}}</td>
          <td>{{optometryDetail.postGlassOs}}</td>
          <td>{{optometryDetail.axesOs}}</td>
          <td>{{optometryDetail.addOs}}</td>
          <td>{{optometryDetail.arriseGlassOs}}</td>
          <td>{{optometryDetail.basisOs}}</td>
          <td></td>
          <td>{{optometryDetail.farPupilDistanceOs}}</td>
          <td>{{optometryDetail.nearPupilDistanceOs}}</td>
          <td>{{optometryDetail.farUseOs}}</td>
          <td>{{optometryDetail.nearUseOs}}</td>
        </tr>
      </table>
    <el-table border style="margin-top: 10px;" :data="dataForm.goodsInfos">
      <el-table-column prop="goodsDescription" label="商品描述"></el-table-column>
      <el-table-column prop="goodsCode" label="商品代码"></el-table-column>
      <el-table-column prop="viewGoodsName" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="单价"></el-table-column>
      <el-table-column prop="goodsQuantity" label="数量"></el-table-column>
      <el-table-column prop="originalPrice" label="原价合计"></el-table-column>
      <el-table-column prop="discountRate" label="折扣率"></el-table-column>
      <el-table-column prop="discountPrice" label="折扣金额"></el-table-column>
      <el-table-column prop="receivablePrice" label="应收金额"></el-table-column>
    </el-table>
    <el-row style="margin-top: 25px;">
      <el-col :span="8">{{dataForm.feedbackTime}}日回访信息</el-col>
      <el-col :span="16"></el-col>
    </el-row>
    <el-form :model="dataForm" ref="dataForm" label-width="110px" inline>
      <el-row>
        <el-col :span="6">
          <el-form-item label="会员卡号" prop="customerCard">
            <el-input v-model="dataForm.customerCard" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="会员名称" prop="name">
            <el-input v-model="dataForm.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="回访日期" prop="feedbackDate">
            <el-input v-model="dataForm.feedbackDate" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="回访满意度" prop="statisfaction">
            <el-select v-model="dataForm.statisfaction" disabled>
              <el-option v-for="item in statisfactionOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人群类型" prop="crowdType">
            <el-select v-model="dataForm.crowdType" disabled>
              <el-option v-for="item in crowdTypeOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="反馈内容" prop="feedbackContent">
            <el-select v-model="dataForm.feedbackContent" disabled>
              <el-option v-for="item in feedbackContentOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="miui">
          <el-form-item label="解决办法" prop="resolvent" size="medium" style="width: 100%;">
            <el-input v-model="dataForm.resolvent" disabled type="textarea" style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </el-dialog>
</template>

<script>
  import {customerFeedBackGetObj} from '@/api/eims/customer-feedback.js'

  export default {
    data () {
      return {
        visible: false,
        optometryDetail: {},
        dataForm: {
          customerId: '',
          feedbackTime: '',
          crowdType: '',           // 人群类型
          statisfaction: '',      // 满意度
          feedbackContent: '',    // 反馈内容
          resolvent: ''
        },
        crowdTypeOptions: [
          {value: 1, name: '学龄前儿童'},
          {value: 2, name: '小学生'},
          {value: 3, name: '初中生'},
          {value: 4, name: '高中生'},
          {value: 5, name: '大学生'},
          {value: 6, name: '青年人'},
          {value: 7, name: '中年人'},
          {value: 8, name: '老年人'}
        ],
        statisfactionOptions: [{value: 1, name: '非常满意'},{value: 2,name:'满意'},{value:3,name:'不满意'}],
        feedbackContentOptions: [
          {value: 1,name:'度数不适'},
          {value: 2,name:'松紧不适'},
          {value: 3,name:'佩戴中'},
          {value: 4,name:'未戴未取'},
          {value: 5,name:'自身原因'},
          {value: 6,name:'眼镜本身'},
          {value: 7,name:'其他'},
        ],
        typeOptions: [
          {value: '1', name: '隐形订做'},
          {value: '2', name: '框镜订做'},
          {value: '3', name: '隐形成品'},
          {value: '4', name: '框镜成品'},
          {value: '5', name: '辅料'}
        ],
      }
    },
    methods:{
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            customerFeedBackGetObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data
                this.goodsInfos = this.dataForm.goodsInfos || {}
                this.optometryDetail = this.dataForm.saleOptometry || {}
              }else{
                this.$message.error(response.data.msg)
              }
              
              // this.dataForm.customerCard = result.data.data.customerCard
              // this.dataForm.name = result.data.data.name
              // this.dataForm.feedbackTime = result.data.data.feedbackDate
              // this.dataForm.crowdType = result.data.data.crowdType
              // this.dataForm.statisfaction = result.data.data.statisfaction
              // this.dataForm.feedbackContent = result.data.data.feedbackContent
            })
          }
        })
      },
      //  类型转换
      valueOrNameTypeChange(value) {
        let obj = {}
        obj = this.typeOptions.find(item => {
          if(item.value == value){
            return item
          }
        })
        if(obj && obj.name){
          return obj.name
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .miui .el-form-item--medium .el-form-item__content, .miui .el-form-item--medium .el-form-item__label {
    width: calc(100% - 110px);
  }

  .miui-table {
  width: 100%;
}
  .miui-table tr>th,.miui-table tr>td {
    border: solid 1px #e7e7e7;
    background-color: #ecf5ff;
    padding: 3px 5px;
    text-align: center;
  }
</style>
